<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar class="glossy">
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="toggleLeftDrawer"
        />

        <q-field dark dense outlined>
          <template v-slot:control>
            <div class="self-center no-outline">
              {{ store.su连接状态显示文字 }}
            </div>
          </template>
          <template v-slot:append>
            <q-btn flat round color="orange" dense :icon="su连接状态显示图标" />
          </template>
        </q-field>
        <q-space/>
        <q-btn label="关于amtf" no-caps dense @click="关于amtf">
          <q-icon name="sentiment_satisfied_alt" color="orange"/>
        </q-btn>

      </q-toolbar>
    </q-header>
    <q-footer elevated>
      <q-tabs>
        <q-route-tab
          v-for="link in linksList"
          :key="link.title"
          v-bind="link"
          :to="link.to"
          :icon="link.icon"
          :label="link.title"
        />
      </q-tabs>
    </q-footer>

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      :breakpoint="767"
      :width="200"
      bordered
    >
      <q-list>
        <!-- <q-item-label header>
          AMTF
        </q-item-label> -->
        <EssentialLink
          v-for="link in linksList"
          :key="link.title"
          v-bind="link"
        />
      </q-list>
    </q-drawer>

    <q-page-container>
      <!-- <router-view /> -->
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </q-page-container>
  </q-layout>
</template>

<script setup>
// <!-- <script> -->
import { ref, onMounted, computed, toRefs } from "vue";
import EssentialLink from "components/EssentialLink.vue";
import useClient from "../hooks/useClient";
import { useRouter } from "vue-router";

window.ws = new WebSocket("ws://localhost:12111"); //不能到hook级别去new,因为ws通信会报错！

const { store, storeToRefs } = useClient(ws);

const router = useRouter();

function 关于amtf(params) {
  // console.log(window.location.href);
  // let result = window.location.href.replace(/index\S*/g, "");
  // console.log(result);
  // // let 地址=`${window.location.origin}/关于amtf.html`
  // let 地址=`${result}关于amtf.html`
  // console.log(地址);
  // window.open(地址, '_blank');

  ws.send(JSON.stringify({'关于amtf':''}));
}

const linksList = [
  {
    title: "主页",
    icon: "",
    to: "/",
  },
  {
    title: "动态组件",
    icon: "",
    to: "/动态组件",
  },
  {
    title: "生产",
    icon: "",
    to: "/生产",
  },
];

function toggleLeftDrawer() {
  leftDrawerOpen.value = !leftDrawerOpen.value;
}

const leftDrawerOpen = ref(false);
// const su连接状态 = ref("0")
console.log(store.su连接状态 == 0 ? "su未连接yyy" : "su已连接yyy");

// const su连接状态显示文字 = computed(()=>store.su连接状态==0?'su未连接':'su已连接')
// console.log(su连接状态显示文字.value);
const su连接状态显示图标 = computed(() =>
  store.su连接状态 == 0
    ? "sentiment_very_dissatisfied"
    : "sentiment_satisfied_alt"
);


onMounted(() => {
  // sendWsMessage  //0
});
</script>
<style lang="scss">
@media screen and (min-width: 768px) {
  .q-footer {
    display: none;
  }
}
.q-drawer {
  .q-router-link--exact-active {
    color: $primary !important;
  }
}
</style>
